<script setup lang="ts">
import { ref } from 'vue';
import MyTable from './components/MyTable.vue';
// 定义类型并 export 导出
export interface Person {
  id: number
  name: string
  age: number
}
  
const list = ref<Person[]>([
  { id: 1, name: '张小花', age: 18 },
  { id: 2, name: '孙大明', age: 19 },
  { id: 3, name: '刘德忠', age: 17 },
])
const list2 = ref<Person[]>([
  { id: 1, name: '赵小云', age: 18 },
  { id: 2, name: '刘蓓蓓', age: 19 },
  { id: 3, name: '姜肖泰', age: 17 },
])
const deleteItem = (id: number) => {
  list.value = list.value.filter(item => item.id !== id)
}
const deleteItem2 = (id: number) => {
  list2.value = list2.value.filter(item => item.id !== id)
}
</script>

<template>
 <MyTable :data="list">
  <template #default="obj">
    <button @click="deleteItem(obj.id)">删除{{ obj }}</button>
  </template>
 </MyTable>
 <MyTable :data="list2">
  <template #default="{id}">
    <button @click="deleteItem2(id)">删除{{ id }}</button>
  </template>
 </MyTable>
</template>


<style scoped>
body {
  background-color: #b3b3b3;
}
</style>